---
title: テーブル
icon: Table
---

<MetaData
  lang="ja-JP"
  meta={{
    preset: [{
      client: '@univerjs/preset-sheets-table',
      locale: '@univerjs/preset-sheets-table/locales/en-US',
      style: '@univerjs/preset-sheets-table/lib/index.css',
    }],
    plugins: [{
      client: '@univerjs/sheets-table',
      facade: '@univerjs/sheets-table/facade',
    }, {
      client: '@univerjs/sheets-table-ui',
      locale: '@univerjs/sheets-table-ui/locale/en-US',
      style: '@univerjs/sheets-table-ui/lib/index.css',
    }],
    server: 'No',
  }}
/>

テーブル機能は、スプレッドシート内で表（テーブル）を作成および管理し、データの整理や表示を向上させます。さまざまなテーブルスタイルや操作をサポートし、ユーザーが情報を素早く処理・分析できるように支援します。

## プリセットモード

### インストール

```package-install
npm install @univerjs/preset-sheets-table
```

### 使い方

```typescript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'
import { UniverSheetsTablePreset } from '@univerjs/preset-sheets-table' // [!code ++]
import UniverPresetSheetsTableEnUS from '@univerjs/preset-sheets-table/locales/en-US' // [!code ++]
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'

import '@univerjs/preset-sheets-core/lib/index.css'
import '@univerjs/preset-sheets-table/lib/index.css' // [!code ++]

const { univerAPI } = createUniver({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      UniverPresetSheetsCoreEnUS,
      UniverPresetSheetsTableEnUS, // [!code ++]
    ),
  },
  presets: [
    UniverSheetsCorePreset(),
    UniverSheetsTablePreset(), // [!code ++]
  ],
})
```

{/* ### プリセットと設定 */}

## プラグインモード

### インストール

```package-install
npm install @univerjs/sheets-table @univerjs/sheets-table-ui
```

### 使い方

```typescript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import { UniverSheetsTablePlugin } from '@univerjs/sheets-table' // [!code ++]
import { UniverSheetsTableUIPlugin } from '@univerjs/sheets-table-ui' // [!code ++]
import SheetsTableUIEnUS from '@univerjs/sheets-table-ui/locale/en-US' // [!code ++]

import '@univerjs/sheets-table-ui/lib/index.css' // [!code ++]

import '@univerjs/sheets-table/facade' // [!code ++]

const univer = new Univer({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      SheetsTableUIEnUS, // [!code ++]
    ),
  },
})

univer.registerPlugin(UniverSheetsTablePlugin) // [!code ++]
univer.registerPlugin(UniverSheetsTableUIPlugin) // [!code ++]
```

{/* ### プラグインと設定 */}

## Facade API

完全な Facade API の型定義は、[FacadeAPI](https://reference.univer.ai/en-US)で確認できます。

### テーブルの挿入

- `FWorkbook.addTable`: 指定したワークブックのワークシートにテーブルを挿入します
- `FWorksheet.addTable`: ワークシートにテーブルを挿入します

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// B2:F11 範囲内にテーブルを挿入
const fRange = fWorksheet.getRange('B2:F11')
const success = await fWorksheet.addTable(
  'name-1',
  fRange.getRange(),
  'id-1',
  {
    tableStyleId: 'table-default-4',
    columns: [
      { id: 'col-1', displayName: 'Column 1' },
    ],
    filters: [
      {
        filterType: univerAPI.Enum.TableColumnFilterTypeEnum.condition,
        filterInfo: {
          conditionType: univerAPI.Enum.TableConditionTypeEnum.Number,
          compareType: univerAPI.Enum.TableNumberCompareTypeEnum.GreaterThan,
          expectedValue: 2,
        },
      },
    ],
  },
)

if (success) {
  const tableInfo = fWorkbook.getTableInfo('id-1')
  console.log('debugger tableInfo', tableInfo)
}
```

### テーブルの取得

- `FWorkbook.getTableList`: ワークブック内のすべてのテーブル一覧を取得します
- `FWorksheet.getSubTableInfos`: ワークシート内のすべてのテーブル一覧を取得します

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const tables = fWorkbook.getTableList()
console.log('debugger tables', tables)
```

- `FWorkbook.getTableInfo`: テーブル ID でテーブル情報を取得します
- `FWorkbook.getTableInfoByName`: テーブル名でテーブル情報を取得します

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// B2:F11 範囲内にテーブルを挿入
const fRange = fWorksheet.getRange('B2:F11')
const success = await fWorksheet.addTable(
  'name-1',
  fRange.getRange(),
  'id-1',
  {
    tableStyleId: 'table-default-4',
  },
)

if (success) {
  const tableInfo = fWorkbook.getTableInfo('id-1')
  console.log('debugger tableInfo', tableInfo)
}
```

- `FWorksheet.getTableByCell`: セル位置からテーブル情報を取得します

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

const cellB2 = fWorksheet.getRange('B2')
const row = cellB2.getRow()
const column = cellB2.getColumn()
console.log('debugger tableInfo', fWorksheet.getTableByCell(row, column))

// B2:F11 範囲内にテーブルを挿入
const fRange = fWorksheet.getRange('B2:F11')
const success = await fWorksheet.addTable(
  'name-1',
  fRange.getRange(),
  'id-1',
  {
    tableStyleId: 'table-default-4',
  },
)
console.log('debugger tableInfo2', fWorksheet.getTableByCell(row, column))
```

### フィルターの設定

- `FWorkbook.setTableFilter`: ワークブック内のテーブルにフィルターを設定します
- `FWorksheet.setTableFilter`: ワークシート内のテーブルにフィルターを設定します

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// B2:F11 範囲内にテーブルを挿入
const fRange = fWorksheet.getRange('B2:F11')
const success = await fWorksheet.addTable(
  'name-1',
  fRange.getRange(),
  'id-1',
  {
    tableStyleId: 'table-default-4',
  },
)

if (success) {
  // 2列目にフィルターを設定
  await fWorksheet.setTableFilter('id-1', 1, {
    filterType: univerAPI.Enum.TableColumnFilterTypeEnum.condition,
    filterInfo: {
      conditionType: univerAPI.Enum.TableConditionTypeEnum.Number,
      compareType: univerAPI.Enum.TableNumberCompareTypeEnum.GreaterThan,
      expectedValue: 10,
    },
  })

  const tableInfo = fWorkbook.getTableInfo('id-1')
  console.log('debugger tableInfo', tableInfo)
}
```

- `FWorksheet.resetFilter`: ワークシート内のテーブルのフィルターをリセットします

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// B2:F11 範囲内にテーブルを挿入
const fRange = fWorksheet.getRange('B2:F11')
const success = await fWorksheet.addTable(
  'name-1',
  fRange.getRange(),
  'id-1',
  {
    tableStyleId: 'table-default-4',
  },
)

if (success) {
  // 2列目にフィルターを設定
  await fWorksheet.setTableFilter('id-1', 1, {
    filterType: univerAPI.Enum.TableColumnFilterTypeEnum.condition,
    filterInfo: {
      conditionType: univerAPI.Enum.TableConditionTypeEnum.Number,
      compareType: univerAPI.Enum.TableNumberCompareTypeEnum.GreaterThan,
      expectedValue: 10,
    },
  })

  // 3 秒後に2列目のフィルターをリセット
  setTimeout(async () => {
    await fWorksheet.resetFilter('id-1', 1)
  }, 3000)

  const tableInfo = fWorkbook.getTableInfo('id-1')
  console.log('debugger tableInfo', tableInfo)
}
```

### テーブルの変更・削除

- `FWorkbook.removeTable`: ワークブック内のテーブルを削除します
- `FWorksheet.removeTable`: ワークシート内のテーブルを削除します

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const tableInfo = fWorkbook.getTableInfo('id-1')
console.log('debugger tableInfo', tableInfo)

if (tableInfo) {
  // 指定したIDのテーブルを削除
  await fWorksheet.removeTable('id-1')
}
```

- `FWorksheet.setTableRange`: ワークシート内のテーブル範囲を更新します

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// B2:F11 範囲内にテーブルを挿入
const fRange = fWorksheet.getRange('B2:F11')
const success = await fWorksheet.addTable(
  'name-1',
  fRange.getRange(),
  'id-1',
  {
    tableStyleId: 'table-default-4',
  },
)

if (success) {
  // 3 秒後にテーブル範囲を B2:F21 に更新
  setTimeout(async () => {
    const newRange = fWorksheet.getRange('B2:F21')
    await fWorksheet.setTableRange('id-1', newRange.getRange())

    const tableInfo = fWorkbook.getTableInfo('id-1')
    console.log('debugger tableInfo', tableInfo)
  }, 3000)
}
```

- `FWorksheet.setTableName`: ワークシート内のテーブル名を更新します

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// B2:F11 範囲内にテーブルを挿入
const fRange = fWorksheet.getRange('B2:F11')
const success = await fWorksheet.addTable(
  'name-1',
  fRange.getRange(),
  'id-1',
  {
    tableStyleId: 'table-default-4',
  },
)

if (success) {
  // 3 秒後にテーブル名を更新
  setTimeout(async () => {
    await fWorksheet.setTableName('id-1', 'new-name')

    const tableInfo = fWorkbook.getTableInfo('id-1')
    console.log('debugger tableInfo', tableInfo)
  }, 3000)
}
```

### テーブルテーマの追加

- `FWorksheet.addTableTheme`: ワークシート内のテーブルにテーマを追加します

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// Insert a table in the range B2:F11
const fRange = fWorksheet.getRange('B2:F11')
const success = await fWorksheet.addTable(
  'name-1',
  fRange.getRange(),
  'id-1',
  {
    tableStyleId: 'table-default-4',
  },
)

if (success) {
  await fWorksheet.addTableTheme('id-1', {
    name: 'table-custom-1',
    headerRowStyle: {
      bg: {
        rgb: '#145f82',
      },
    },
    firstRowStyle: {
      bg: {
        rgb: '#c0e4f5',
      },
    },
  })

  const tableInfo = fWorkbook.getTableInfo('id-1')
  console.log('debugger tableInfo', tableInfo)
}
```
